<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>自定义箭头</title>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      G6.registerEdge('line-arrow', {
        itemType: 'edge',
        draw(cfg, group) {
          const { startPoint, endPoint } = cfg;
          const keyShape = group.addShape('path', {
            attrs: {
              path: [
                ['M', startPoint.x, startPoint.y],
                ['L', endPoint.x, endPoint.y],
              ],
              stroke: '#00F',
              lineWidth: 1,
              startArrow: {
                path: 'M 10,0 L -10,-10 L -10,10 Z',
                d: 10,
              },
              endArrow: {
                path: 'M 10,0 L -10,-10 L -10,10 Z',
                d: 10,
              },
            },
          });
          return keyShape;
        },
      });

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        defaultNode: {
          size: [40, 40],
        },
        modes: {
          default: ['drag-node', 'drag-canvas', 'click-select'],
        },
      });

      const data = {
        nodes: [
          {
            id: 'node1',
            label: 'node1',
            x: 500,
            y: 200,
            shape: 'rect',
          },
          {
            id: 'node2',
            label: 'node2',
            x: 300,
            y: 400,
            shape: 'rect',
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            shape: 'line-arrow',
          },
        ],
      };

      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
